<template>
    <div class="points-view">
        <div class="page-header">
            <h1>积分中心</h1>
            <p>查看您的积分详情和历史记录</p>
        </div>

        <!-- 积分总览 -->
        <el-card class="points-summary-card">
            <el-row :gutter="20">
                <el-col :span="24">
                    <div class="summary-item">
                        <p class="summary-label">当前总积分</p>
                        <p class="summary-value">{{ userStore.points || 0 }}</p>
                    </div>
                </el-col>
            </el-row>
        </el-card>

        <!-- 积分历史 -->
        <el-card class="points-history-card">
            <template #header>
                <div class="card-header">
                    <span>积分历史</span>
                </div>
            </template>

            <!-- 加载状态 -->
            <div v-if="loading" class="loading-container">
                <LoadingSpinner />
            </div>

            <!-- 空状态 -->
            <div v-else-if="!pointsHistory.length" class="empty-container">
                <EmptyState title="暂无积分记录" description="您的积分还没有任何变动" :icon="Star" />
            </div>

            <!-- 历史列表 -->
            <div v-else>
                <el-table :data="pointsHistory" style="width: 100%">
                    <el-table-column prop="typeText" label="类型" width="100" />
                    <el-table-column prop="amount" label="数量">
                        <template #default="{ row }">
                            <span :class="getAmountClass(row.type)">{{ row.amount > 0 ? '+' : '' }}{{ row.amount }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="balance" label="余额" />
                    <el-table-column prop="description" label="描述" />
                    <el-table-column prop="createdAt" label="时间">
                        <template #default="{ row }">
                            {{ new Date(row.createdAt).toLocaleString() }}
                        </template>
                    </el-table-column>
                </el-table>

                <!-- 分页 -->
                <div class="pagination-container">
                    <el-pagination background layout="prev, pager, next" :total="total" :page-size="pageSize"
                        v-model:current-page="currentPage" @current-change="handlePageChange" />
                </div>
            </div>
        </el-card>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'
import { getPointsHistory } from '@/api/modules/points'
import type { PointsRecord } from '@/types'
import LoadingSpinner from '@/components/base/LoadingSpinner.vue'
import EmptyState from '@/components/base/EmptyState.vue'
import { Star } from '@element-plus/icons-vue'

const route = useRoute()
const router = useRouter()
const userStore = useUserStore()

const pointsHistory = ref<PointsRecord[]>([])
const loading = ref(false)
const total = ref(0)
const currentPage = ref(1)
const pageSize = ref(10)

// 加载积分历史
const loadPointsHistory = async (page: number) => {
    try {
        loading.value = true
        const response = await getPointsHistory({ page, size: pageSize.value })
        pointsHistory.value = response.list.map((record: PointsRecord) => ({
            ...record,
            typeText: getTypeText(record.type)
        }))
        total.value = response.total
    } catch (error) {
        console.error('获取积分历史失败:', error)
    } finally {
        loading.value = false
    }
}

const getTypeText = (type: string) => {
    switch (type) {
        case 'earn': return '赚取'
        case 'spend': return '消费'
        case 'expire': return '过期'
        case 'refund': return '退款'
        default: return '其他'
    }
}

const getAmountClass = (type: string) => {
    return type === 'earn' || type === 'refund' ? 'amount-earn' : 'amount-spend'
}

// 处理分页变化
const handlePageChange = (page: number) => {
    currentPage.value = page
    router.push({ query: { page } })
}

// 监听路由变化
watch(
    () => route.query.page,
    (newPage) => {
        const page = Number(newPage) || 1
        currentPage.value = page
        loadPointsHistory(page)
    },
    { immediate: true }
)

// 组件挂载时加载数据
onMounted(() => {
    const page = Number(route.query.page) || 1
    currentPage.value = page
    loadPointsHistory(page)
    userStore.initUserState()
})
</script>

<style scoped>
.points-view {
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px;
}

.page-header {
    text-align: center;
    margin-bottom: 30px;
}

.page-header h1 {
    color: #333;
    margin-bottom: 10px;
    font-size: 28px;
    font-weight: 600;
}

.page-header p {
    color: #666;
    font-size: 16px;
}

.points-summary-card {
    margin-bottom: 30px;
    border-radius: 8px;
}

.summary-item {
    text-align: center;
}

.summary-label {
    font-size: 14px;
    color: #666;
    margin-bottom: 10px;
}

.summary-value {
    font-size: 24px;
    font-weight: 600;
    color: #333;
}

.points-history-card {
    border-radius: 8px;
}

.card-header {
    font-size: 16px;
    font-weight: 500;
}

.loading-container,
.empty-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
}

.amount-earn {
    color: #67c23a;
}

.amount-spend {
    color: #f56c6c;
}

.pagination-container {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}
</style>
